<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/logo.png" alt="" />

			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="top">
			
		</div>
		<div class="search">
			<input type="text" v-model="search" :placeholder="$t('language.search')" />
			<img class="ic" src="../assets/101.png" alt="" />
		</div>

		<div class="card">
			<div class="card-list" v-if="!hideCategory">
				<div class="item" v-for="item in list" :key="item.id" @click="goPage('list', item.id)">
					<img class="ic" :src="item.logo" :alt="$i18n.locale == 'zh' ? item.cn_title: item.eu_title" />
					<span>{{$i18n.locale == 'zh' ? item.cn_title: item.eu_title}}</span>
				</div>
			</div>
			<div class="list" v-else>
				<van-cell v-for="item in searchList" :key="item.id"
					:title="$i18n.locale == 'zh' ? item.cn_title: item.eu_title" is-link @click="goPage('details', item.id)" />
				<div class="not-text" v-if="searchList.length == 0">
					{{search == '' ?$t('language.postolder') : $t('language.normal')}}
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		getHelpClass,
		getHelpSearch
	} from '@/api/user';
	let timer = null
	export default {
		name: 'List',
		data: function() {
			return {
				search: '',
				hideCategory: false,
				list: '',
				searchList: ''
			}
		},
		created() {
			this.getList()
		},
		mounted() {},
		watch: {
			search: function() {
				const t = this
				if (timer != null) clearTimeout(timer)
				if (t.search.length > 0) {
					t.hideCategory = true
				} else {
					t.hideCategory = false
					t.getList()
					return
				}
				timer = setTimeout(() => {
					timer = null
					clearTimeout(timer)
					t.getSearch()
				}, 500)
			}
		},
		methods: {
			getList() {
				getHelpClass({
					pid: 0
				}).then((res) => {
					const {
						list
					} = res.data
					this.list = list
				}).catch((err) => {
					console.log(err)
				})
			},
			getSearch() {
				getHelpSearch({
					key: this.search
				}).then((res) => {
					console.log(res)
					this.searchList = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			goPage(page, id) {
				this.$router.push({
					path: page,
					query: {
						id
					}
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #F5F5FA;
	}

	.search {
		position: relative;
		z-index: 10;
		padding: 0 28px;
		margin: 40px 30px;
		height: 88px;
		background-color: #fff;
		border: 1px solid #B78D5B;
		box-sizing: border-box;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Source Han Sans CN;
		font-weight: 400;

		input {
			font-size: 28px;
			color: #333333;
			width: 100%;
			height: 100%;
		}

		.ic {
			width: 28px;
			height: 28px;
			flex-shrink: 0;
		}
	}

	.card {
		position: relative;

		.card-list {
			display: flex;
			flex-wrap: wrap;
			margin: 0 30px;

			.item {
				width: 210px;
				min-height: 260px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24px;
				font-weight: bold;
				padding: 0;
				margin-right: 30px;
				margin-bottom: 30px;
				background: #FFFFFF;
				border-radius: 10px;
				
				&:nth-child(3n) {
					margin-right: 0;
				}

				.ic {
					width: 100px;
					height: 100px;
					margin-right: 0;
					margin-bottom: 25px;
					object-fit: contain;
				}
			}
			
			
		}
		
		.list {
			margin: 0 30px;
			padding: 0 30px;
			background-color: #FFFFFF;
			border-radius: 15px;
		}

		.van-cell {
			font-size: 26px;
			padding: 36px 0;
			line-height: 26px;
			color: #000000;

			.van-cell__left-icon,
			.van-cell__right-icon {
				font-size: 30px;
			}

			&::after {
				left: 0;
				border-bottom-color: #ccc;
			}
		}
	}

	.not-text {
		font-size: 24px;
		color: #999999;
		text-align: center;
		padding: 24px 0;
	}
</style>